<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二手车过户界面</title>
    <!--加载layui的css样式-->
    <link rel="stylesheet" href="/aaa/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/aaa/layuiadmin/style/admin.css" media="all">
    <style>
        .layui-table-cell {
            height: 80px;
            line-height: 80px;

        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <!--搜索菜单栏-->
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <!--搜索条件-->
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">手机号：</label>
                    <div class="layui-input-block">
                        <input type="text" name="telphone" id="telephone" placeholder="请输入" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">员工号：</label>
                    <div class="layui-input-block">
                        <input type="text" name="employeeid" id="employeeid" placeholder="请输入" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <!--搜索按钮-->
                <div class="layui-inline">
                    <button id="cartransfer-searchbtn" class="layui-btn layuiadmin-btn-admin" lay-submit
                            lay-filter="LAY-user-back-search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                </div>
            </div>
            <!--用户私下的二手车交易-->
            <div class="layui-button">
                <button id="scondcartransfer" class="layui-btn layui-btn-nomal">
                    <i class="layui-icon  layuiadmin-button-btn">无信息二手车过户</i>
                </button>
            </div>
        </div>
        <!--查询出的信息栏-->
        <div class="layui-card-body">
            <table class="layui-hide" id="cartransfer" lay-filter="cartransfer-filter"></table>
            <!--前缀编号-->
            <script type="text/html" id="addList">
                {{d.LAY_TABLE_INDEX+1}}
            </script>
            <!--layui的js包-->
            <script src="/aaa/layuiadmin/layui/layui.js"></script>
            <!--操作按键-->
            <script type="text/html" id="cartransfer-bar">
                <a class="layui-btn  layui-btn-xs" lay-event="cartransfer-detail">二手车过户</a>
            </script>
        </div>
    </div>
</div>


<!--------------------------------------弹出二手车过户详情---------------------------------------------------------------------------------------------------------------------->

<div class="x-body" style="display:none;" id="cartransfer-layer">
    <!--form表单展示过户的详情-->
    <form class="layui-form" id="addform" lay-filter="detailmessage">
        <div class="layui-form-item">
            <label class="layui-form-label">原车主手机号：</label>
            <div class="layui-input-inline">
                <input type="text" name="telephone1" id="cartransfer-telephone1" required lay-verify="required"
                       placeholder="" autocomplete="off" class="layui-input" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电瓶车型号：</label>
            <div class="layui-input-inline">
                <input type="text" name="goodsname" id="cartransfer-goodsname" required lay-verify="required"
                       placeholder="" autocomplete="off" class="layui-input" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电瓶车出厂码：</label>
            <div class="layui-input-inline">
                <input type="text" name="carcode" id="cartransfer-code" required lay-verify="required" placeholder=""
                       autocomplete="off" class="layui-input" >
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">新车主手机号：</label>
            <div class="layui-input-inline">
                <input type="text" name="telephone2" id="cartransfer-telephone2" required lay-verify="required"
                       placeholder="" autocomplete="off" class="layui-input" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">过户员工员工号：</label>
            <div class="layui-input-inline">
                <input type="text" name="employeeid" id="cartransfer-employeeid" required lay-verify="required"
                       placeholder="" autocomplete="off" class="layui-input">
            </div>
        </div>


        <!--保存认证的信息-->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="cartransfer-layer">门店认证</button>
            </div>
        </div>

    </form>
</div>
<div id="" style="display: none">


</div>
</div>
<!--自定义模板填入图片地址-->
<script type="text/html" id="showimg">
    <img src="{{ d.secondCarphotoUrl}}"/>
</script>
<!--自定义模板区分是否认证-->
<script type="text/html" id="state">
    {{#if (d.verifystate == 0) { }}
    <span style="color: #00FF00">未认证</span>
    {{# }else if(d.verifystate == 1){ }}
    <span style="color: red">认证</span>
    {{# } }}
</script>
<script th:inline="none">
    layui.use(['table', 'laytpl', 'form'], function () {
        var table = layui.table;
        var laytpl = layui.laytpl;
        var form = layui.form;
        var $ = layui.$;
        table.render({
            //连接搜索栏
            elem: '#cartransfer',
            height: 400,
            //跳转的地址信息
            url: '/aaa/SecondCarTransferContreller/GetcartransferRelatedMessage',
            //分页功能
            page: true,
            //列表中所查询的信息
            cols: [
                [
                    {field: 'add', title: '编号', align: 'center', templet: '#addList', width: 50},
                    {field: 'school', title: '学校', align: 'center',sort:true},
                    {field: 'telephone', title: '用户手机号', align: 'center'},
                    {field: 'goodsname', title: '电车型号', align: 'center',sort:true},
                    {field: 'carcode', title: '出厂码', align: 'center'},
                    {
                        field: 'secondCarphotoUrl', width: 150,
                        unresize: true, align: 'center', title: '照片',
                        //templet:'<div><img src="{{d.cartransferphotoUrl}}"></div>'
                        templet: '#showimg'
                    },  //自定义显示图片方法
                    {field: 'verifystate', title: '是否认证', align: 'center', templet: '#state',sort:true},
                    {field: 'name', title: '认证员工', align: 'center',sort:true},
                    {title: '操作', toolbar: '#cartransfer-bar', align: 'center'},
                ]
            ],
            //显示大图-----------------------------------------------------------------------------------------------
            done: function (res, curr, count) {
                hoverOpenImg();//显示大图
                $('table tr').on('click', function () {
                    $('table tr').css('background', '');
                    $(this).css('background', '<%=PropKit.use("config.properties").get("table_color")%>');
                });
            }

        });

        //显示大图-----------------------------------------------------------------------------------------------
        function hoverOpenImg() {
            var img_show = null; // tips提示
            $('td img').hover(function () {
                var kd = $(this).width();
                kd1 = kd * 3;          //图片放大倍数
                kd2 = kd * 3 + 30;       //图片放大倍数
                var img = "<img class='img_msg' src='" + $(this).attr('src') + "' style='width:" + kd1 + "px;' />";
                img_show = layer.tips(img, this, {
                    tips: [2, 'rgba(41,41,41,.5)']
                    , area: [kd2 + 'px']
                });
            }, function () {
                layer.close(img_show);
            });
            $('td img').attr('style', 'max-width:70px;display:block!important');
        }

        //搜索框点击事件-----------------------------------------------------------------------------------------------
        $('#cartransfer-searchbtn').click(function () {
            table.reload('cartransfer', {
                url: '/aaa/SecondCarTransferContreller/GetcartransferRelatedMessage',
                where: {
                    telephone: $("#telephone").val(),
                    employeeid: $("#employeeid").val()
                } //设定异步数据接口的额外参数
                //,height: 300
            });
        })




        //所有表格中按钮点击事件-----------------------------------------------------------------------------------------------
        //监控数据表格
        table.on('tool(cartransfer-filter)', function (obj) {
            var data = obj.data;
            //详情按钮触发的事件----------------------------------------
            //查询对应的二手车认证信息表单内容----------------------------------------------
            if (obj.event === 'cartransfer-detail') {
                //查询对应的二手车认证信息表单内容
                $.post({
                    //后台地址
                    url: '/aaa/SecondCarTransferContreller/GetcartransferDetailMessage',
                    //传入后台的内容
                    data: {
                        carcode: data.carcode,
                        telephone: data.telephone
                    },
                    //成功返回的参数
                }, function (data) {
                    //alert(data[0].telephone);
                    $("#cartransfer-telephone1").val(data[0].telephone);
                    $("#cartransfer-goodsname").val(data[0].goodsname);
                    $("#cartransfer-code").val(data[0].carcode);

                });
                //加载数据完毕后打开表单
                cartransferlayer = layer.open({
                    type: 1,
                    title: '二手车过户详情',
                    shade: [0.3, '#393D49'],
                    maxmin: false,
                    shadeClose: false,
                    area: ['893px', '550px'],
                    //打开的弹出层
                    content: $('#cartransfer-layer')
                });


            }
        });


        //二手车过户确认按钮
        //form表单监控，监控提交按钮
        form.on('submit(cartransfer-layer)', function (data) {
            var param = data.field;//定义临时变量获取表单提交过来的数据，非json格式
            console.log(param);

            $.ajax({
                url: "/aaa/SecondCarTransferContreller/TransferCar",
                method: 'post',//method请求方式，get或者post
                dataType: 'json',//预期服务器返回的数据类型
                data: param,//表格数据序列化
                success: function (res) {//res为相应体,function为回数
                    if (res.code==100) {
                        layer.msg('过户成功',{icon:1,time:3000});
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                    }

                    location.reload();
                }
            });
        });
        //用户私底下交易的二手车过户按钮
        $(document).on('click','#scondcartransfer',function(){
            layer.msg('hello');
            cartransferlayer = layer.open({
                type: 1,
                title: '二手车过户详情',
                shade: [0.3, '#393D49'],
                maxmin: false,
                shadeClose: false,
                area: ['893px', '550px'],
                //打开的弹出层
                content: $('#cartransfer-layer')
            });
        });
    });
</script>
</body>
</html>